<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <script src="script/jquery-3.3.1.js"></script>
<!--<%&#45;&#45;    <script>&#45;&#45;%>-->
<!--<%&#45;&#45;        //在页面加载完成后,写一个入口函数&#45;&#45;%>-->
<!--<%&#45;&#45;        $(function (){&#45;&#45;%>-->
<!--<%&#45;&#45;            //给usename绑定blur事件  unblur失去焦点事件&#45;&#45;%>-->
<!--<%&#45;&#45;            $("#usename").blur(function (){&#45;&#45;%>-->
<!--<%&#45;&#45;                //获取usename文本输入框的值,转成jquery对象，val获取其值&#45;&#45;%>-->
<!--<%&#45;&#45;                var usename = $(this).val();&#45;&#45;%>-->
<!--<%&#45;&#45;                //发送ajax请求校验用户名是否存在get or post,参数二为请求参数的键值对,第一个为键的名称，第二个为var变量usename,data为传输回来的值&#45;&#45;%>-->
<!--<%&#45;&#45;                //期望服务器响应回的数据格式：{”userExsit“：true，”msg“：”此用户太受欢迎，请更换一个“}msg为提示信息，也放在服务器端完成&#45;&#45;%>-->
<!--<%&#45;&#45;                //                      {”userExsit“：false，”msg“：”用户名可用“}msg为提示信息，也放在服务器端完成&#45;&#45;%>-->
<!--<%&#45;&#45;                $.get("findUserServlet",{usename:usename},function (data){&#45;&#45;%>-->

<!--<%&#45;&#45;                    //注意，响应回来的data仅仅是一个字符串，浏览器并没有将其当作一个json来处理,下面如果直接将其作为json来获取数据会获取不到&#45;&#45;%>-->
<!--<%&#45;&#45;                    //解决：1.在get方法里面传”json“&#45;&#45;%>-->

<!--<%&#45;&#45;                    //处理得到的json，判断里面的userExsit键的值是否是true&#45;&#45;%>-->
<!--<%&#45;&#45;                    var span = $("#_usename");&#45;&#45;%>-->
<!--<%&#45;&#45;                    if(data.login==true){&#45;&#45;%>-->
<!--<%&#45;&#45;                        //用户名存在,在usename文本输入框后面显示一些信息&#45;&#45;%>-->
<!--<%&#45;&#45;                        //给span设置一些样式&#45;&#45;%>-->
<!--<%&#45;&#45;                        span.css("color","green");&#45;&#45;%>-->
<!--<%&#45;&#45;                        span.html(data.msg);&#45;&#45;%>-->
<!--<%&#45;&#45;                    }else{&#45;&#45;%>-->
<!--<%&#45;&#45;                        //用户名不存在&#45;&#45;%>-->
<!--<%&#45;&#45;                        //给span设置一些样式&#45;&#45;%>-->
<!--<%&#45;&#45;                        span.css("color","red");&#45;&#45;%>-->
<!--<%&#45;&#45;                        span.html(data.msg);&#45;&#45;%>-->
<!--<%&#45;&#45;                    }&#45;&#45;%>-->
<!--<%&#45;&#45;                },"json");&#45;&#45;%>-->
<!--<%&#45;&#45;            })&#45;&#45;%>-->
<!--<%&#45;&#45;            $("#password").blur(function (){&#45;&#45;%>-->
<!--<%&#45;&#45;                //获取usename文本输入框的值,转成jquery对象，val获取其值&#45;&#45;%>-->
<!--<%&#45;&#45;                var password = $(this).val();&#45;&#45;%>-->
<!--<%&#45;&#45;                var usename=$("#usename").val();&#45;&#45;%>-->
<!--<%&#45;&#45;                //发送ajax请求校验用户名是否存在get or post,参数二为请求参数的键值对,第一个为键的名称，第二个为var变量usename,data为传输回来的值&#45;&#45;%>-->
<!--<%&#45;&#45;                //期望服务器响应回的数据格式：{”userExsit“：true，”msg“：”此用户太受欢迎，请更换一个“}msg为提示信息，也放在服务器端完成&#45;&#45;%>-->
<!--<%&#45;&#45;                //                      {”userExsit“：false，”msg“：”用户名可用“}msg为提示信息，也放在服务器端完成&#45;&#45;%>-->
<!--<%&#45;&#45;                $.get("findUserServlet",{password:password,usename:usename},function (data){&#45;&#45;%>-->

<!--<%&#45;&#45;                    //注意，响应回来的data仅仅是一个字符串，浏览器并没有将其当作一个json来处理,下面如果直接将其作为json来获取数据会获取不到&#45;&#45;%>-->
<!--<%&#45;&#45;                    //解决：1.在get方法里面传”json“&#45;&#45;%>-->

<!--<%&#45;&#45;                    //处理得到的json，判断里面的userExsit键的值是否是true&#45;&#45;%>-->
<!--<%&#45;&#45;                    var span = $("#_password");&#45;&#45;%>-->
<!--<%&#45;&#45;                    if(data.login==true){&#45;&#45;%>-->
<!--<%&#45;&#45;                        //用户名存在,在usename文本输入框后面显示一些信息&#45;&#45;%>-->
<!--<%&#45;&#45;                        //给span设置一些样式&#45;&#45;%>-->
<!--<%&#45;&#45;                        span.css("color","green");&#45;&#45;%>-->
<!--<%&#45;&#45;                        span.html(data.msg);&#45;&#45;%>-->
<!--<%&#45;&#45;                    }else{&#45;&#45;%>-->
<!--<%&#45;&#45;                        //用户名不存在&#45;&#45;%>-->
<!--<%&#45;&#45;                        //给span设置一些样式&#45;&#45;%>-->
<!--<%&#45;&#45;                        span.css("color","red");&#45;&#45;%>-->
<!--<%&#45;&#45;                        span.html(data.msg);&#45;&#45;%>-->
<!--<%&#45;&#45;                    }&#45;&#45;%>-->
<!--<%&#45;&#45;                },"json");&#45;&#45;%>-->
<!--<%&#45;&#45;            })&#45;&#45;%>-->
<!--<%&#45;&#45;        })&#45;&#45;%>-->


<!--<%&#45;&#45;    </script>&#45;&#45;%>-->
<!--<%&#45;&#45;<script src="js/jquery-3.3.1.min.js"></script>&#45;&#45;%>-->
<!--<%&#45;&#45;    <script>&#45;&#45;%>-->
<!--<%&#45;&#45;        //在页面加载完成后给id为usename的文本输入框绑定提交事件&#45;&#45;%>-->
<!--<%&#45;&#45;        $(function (){&#45;&#45;%>-->
<!--<%&#45;&#45;            //给usename绑定blur事件(失去焦点事件)&#45;&#45;%>-->
<!--<%&#45;&#45;            $("#usename").blur(function (){&#45;&#45;%>-->
<!--<%&#45;&#45;                //获取文本输入框的值&#45;&#45;%>-->
<!--<%&#45;&#45;                $(this).val();&#45;&#45;%>-->
<!--<%&#45;&#45;                //发送ajax请求&#45;&#45;%>-->
<!--<%&#45;&#45;            });&#45;&#45;%>-->
<!--<%&#45;&#45;        });&#45;&#45;%>-->
<!--<%&#45;&#45;    </script>&#45;&#45;%>-->
<script>
    window.onload=function (){
        var img = document.getElementById("img");
        img.onclick=function (){
            img.src="checkCodeServlet?time="+new Date().getTime();

            //$("#img").src="/checkCodeServlet?time="+new Date().getTime();
        }
        $("#change").onclick=function (){

            $("#img").src="/checkCodeServlet?time="+new Date().getTime();
        }
    }


</script>
</head>
<style>
    /**{*/
    /*    margin: 0px;*/
    /*    padding: 0px;*/
    /*    box-sizing: border-box;*/
    /*}*/

    .bac_border{
        width: 500px;
        height:500px;
        border: 8px;
        margin: auto;
        padding: 15px;
    }
    .title{
        margin:auto;
        margin-top: 100px;

    }
    .end{
        margin:auto;
        margin-top: 40px;
    }
    .word{
        font-size: 20px;
    }
    #usename,#password,#checkCode{
        border: 1px;
        width:452px ;
        margin-top: 50px;
    }
    .left{
        width: 80px;
        text-align: right;
        height: 80px;
    }
    #usename,#password,#checkCode{
        width: 290px;
        height: 43px;
        border: 1px solid #A6A6A6;
        border-radius: 5px;
        padding-left: 10px;
    }
    #btn_sub{
        width: 100px;
        height: 30px;
        background-color:lightskyblue;
        align-content: center;
        border: 1px solid lightskyblue;
    }
    .tip{
        color:red;
        margin-left: 200px;
        margin-bottom: 30px;
    }
    #photo{
        float: right;
    }
</style>
<body>
<div class="bac_border">
    <div class="title"><p class="word" align="center">用户登录</p></div>
    <div  class="table">
        <form action="userServlet" method="get">
            <input type="hidden" name="action" value="userLogin">
            <table>
                <tr>
                    <td class="left"><label for="usename">用户名</label></td>
                    <td class="right"><input type="text" name="usename" id="usename" placeholder="请输入用户名"></td>

                </tr>
                <tr>
                    <td class="left"><label for="password">密码</label></td>
                    <td class="right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>

                </tr>


                <tr>
                    <td class="left">验证码</td>
                    <td class="right"><input type="text" name="checkCode" id="checkCode"></td>
                </tr>
                <div class="end" align="center" colspan="3" >
                    <input type="submit" id="btn_sub" value="登录">
                </div>
            </table>
        </form>
    </div>
</div>
<br>
<tr>
    <img id="img" src="image/checkCode.jpg" width="100" height="50">
    <a id="change" herf="">换一张</a>
</tr>
</body>
</html>
